<template>
    <view class="content">
        <van-nav-bar :title="scrolling ? navBarTitle : ''" left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view :refresher-enabled="false" class="scroll-content" @scroll="scrollPage" scroll-y
            :lower-threshold="80" show-scrollbar="false"  @scrolltolower="loadMore">

            <view class="scroll-box">
                <view class="list_title">{{ navBarTitle }}</view>
                <view class="productList_content">
                    <view class="pinTuan_content" v-for="(item, index) in contentData" :key="index" @click="toGroupBuyingProduct(item)">
                        <view class="box_content b13 act_display">
                            <view class="content_img"><img :src="item.image" alt="" mode="widthFix" /> </view>
                            <view class="content_text pintuanContent_text">
                                <view class="content_text_title text_title t1">{{ item.groupBuyingName }}</view>
                                <view class="content_text_bottom">
                                    <view class="bottom_left">
                                        <template v-if="item.labelList && item.label.labelList !== 0 && item.label !== null">
                                             <view class="content_text_tips_box">
                                                <view class="content_text_tips" v-for="(j, k) in item.labelList" :key="k"
                                                    style="display: inline-block;">
                                                    <span class="tips_span">{{ j.name }}</span>
                                                </view>
                                            </view>
                                        </template>
                                        <view class="content_text_progress" :class="{ 't7': !item.label || item.labelList.length === 0 }">
                                            <van-progress :percentage="item.progress" stroke-width="9px" color="#F1551C" track-color="#E7E7E7" show-pivot="false" show-info="false" 
                                            :class="{'hide-before': (item.groupBuyingProductCount === 0|| (Number((item.groupBuyingProductOrderCount/item.groupBuyingProductCount) * 100).toFixed(0)==0))}"/>
                                            <span class="progress_span">
                                                热抢{{ Number(item.groupBuyingProductOrderCount)/Number(item.groupBuyingProductCount)}}%
                                            </span>

                                        </view>
                                    </view>
                                    <!-- <view class="bottom_right" @click="goBuy()"> -->
                                    <!-- <view class="goBuy_icon"  @click.stop="goBuy(item)">去抢购</view> -->
                                    <view class="goBuy_icon" v-if="currentTime<item.startTime || item.groupBuyStatus=='未开始'"> 未开始</view>
									<view class="goBuy_icon" @click.stop="goBuy(item)" v-else-if="(currentTime>item.startTime && currentTime<item.stopTime) || item.groupBuyStatus=='进行中'">去抢购 </view>
									<view class="goBuy_icon" @click="goBuy()" v-else-if="(currentTime>item.stopTime) || item.groupBuyStatus=='已结束'">已结束 </view>
                                    <!-- </view> -->
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

    </view>
</template>

<script>
import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
import { getGroupBuyingPagingQueryApi } from '@/api/find'


export default {
    components: {

    },
    data() {
        return {
            navBarTitle: '17拼团',
            scrolling: false, // 顶部区域吸顶效果
            params: undefined,
            // 17拼团
            contentData: [
                // {
                //     image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find/panda.png',
                //     title: "立达小熊猫 | 悬挂式抽纸1300抽",
                //     label: ['今日开抢', '每人一份', '好评如潮'],
                //     joinPeopleNum: 0,
                //     peopleNum: 100
                // },
                // {
                //     image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find/wudeli.png',
                //     title: "五得利面粉10斤八星雪花麦芯小麦粉5kg",
                //     label: ['今日开抢', '数量不限', '卖爆五万'],
                //     joinPeopleNum: 50,
                //     peopleNum: 100
                // },
                // {
                //     // imgurl: require('../../static/find/maojin.png'),
                //     image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find/maojin.png',
                //     title: "三利抗菌加厚毛巾2条A类吸水男女洗脸洗澡家用干发大面巾 棕/灰",
                //     // label: ['数量不限'],
                //     joinPeopleNum: 30,
                //     peopleNum: 100
                // }
			],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            isLoadAll: false,
            loading: false,
            finished: false,
            startTime: '',
            stopTime: '',
            groupBuyingProductOrderCount: '', // 拼团人数
            groupBuyingProductCount: '', // 拼团总人数
            describeInfo: '', // 拼团描述
            groupBuyId: '', // 拼团id
        }
    },
    onLoad(data) {
        // 取到路由携带的参数
        if (data != null) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log('params', this.params)
        }
    },
    onReady() {
        topStyleWhite()
        const GroupBuyingPaging = this.getGroupBuyingPagingQueryMethod()
        Promise.all([GroupBuyingPaging]).then(() => {
            console.log('所有api加载完成')
            // this.loadingIsShow = false
        })
        
    },
    methods: {
		formatDateForIOS(dateStr) {
			return dateStr.replace(/-/g, '/');
		},
        // scrolltolower () {
        //     if (this.totalPage <= this.contentData.length) {
        //         this.isLoadAll = true
        //         this.biaozhi = 0
        //         this.loadingText = '没有更多数据啦~'
        //     } else {
        //         this.abnormalDetailsParamas.pageNum++
        //         this.isLoadAll = true
        //         this.loadingText = '加载中...'
        //         this.biaozhi = 1
        //         this.getAbnormalDetailsMethod()
        //     }
        // },
        // 互动页面
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
            // this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
            // if (e.detail.scrollTop > 70) {
            //     // console.log(e.detail.scrollTop, 'ssssssssssss')
            //     // this.checkClass = true
            //     this.checkClass = 1
            // } else if (e.detail.scrollTop < 16) {
            //     this.checkClass = 0
            //     // this.checkClass = false
            // } else {
            //     this.checkClass = (e.detail.scrollTop - 16) / 54
            // }
        },

        onClickLeft() {
            uni.navigateBack()
        },
        loadMore() {
            if (!this.finished) {
                this.getGroupBuyingPagingQueryMethod();
            }
        },
        // 去抢购
        goBuy(item) {
            const params = {
                biaozhi:'find',
			    productId:item.productId,
                show:true,
                groupBuyId:item.id
            }

            uni.navigateTo({
                url:
                    '/pages/shangcheng/goodsDetail?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        getGroupBuyStatus(startTimeStr, stopTimeStr) {
			const currentTime = new Date(); // 当前时间
			const startTime = new Date(this.formatDateForIOS(startTimeStr)); // 转换为Date对象
			const stopTime = new Date(this.formatDateForIOS(stopTimeStr)); // 转换为Date对象

			if (currentTime < startTime) {
				return '未开始';
			} else if (currentTime > stopTime) {
				return '已结束';
			} else {
				return '进行中';
			}
		},
		// 拼团详情
		toGroupBuyingProduct(item){
			const params = {
                biaozhi:'find',
			    productId:item.productId,
			    show:false,
                startTime:item.startTime,
                stopTime: item.stopTime,
                groupBuyingProductOrderCount: item.groupBuyingProductOrderCount, // 拼团人数
                groupBuyingProductCount: item.groupBuyingProductCount, // 拼团总人数
                describeInfo: item.info, // 拼团描述
                attrValueId:item.attrValueId,
                groupBuyId:item.id
            }
			uni.navigateTo({
                url:
              '/pages/shangcheng/goodsDetail?params=' +
              encodeURIComponent(JSON.stringify(params))
            })
		},

        // refresherpulling () {
        //     if (!this.isrefresher) {
        //         this.tableInfo = []
        //         this.contentData = []
        //         this.totalPage = 0
        //         this.loadingText = ''
        //         this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
        //         this.abnormalDetailsParamas.pageNum = 1
        //         console.log(this.abnormalDetailsParamas.pageNum, 'pageNum')
        //         const interFace = this.getAbnormalDetailsMethod()
        //         Promise.all([interFace]).then(() => {
        //             // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
        //             this.time = setTimeout(e => {
        //                 this.isrefresher = false
        //             }, 100)
        //         })
        //     }
        // },

        // 接口 
        getGroupBuyingPagingQueryMethod() {
            if (this.loading || this.finished) return;
            this.loading = true;
            return new Promise((resolve, reject) => {

                const params = {
                    pageNo:this.pageNum,
                    pageSize:this.pageSize,
                }
                getGroupBuyingPagingQueryApi(params).then((res) => {
                    console.log(res.data)
                    if (res.code === 200) {
                        this.total = res.data.total;                   
                        this.contentData = this.pageNum === 1
                            ? res.data.list
                            : [...this.contentData, ...res.data.list];
                        this.finished = this.contentData.length >= this.total;
                        this.pageNum++;
                        console.log(this.contentData, 'this.contentData')

                        this.contentData.forEach(item => {
                            // item.labelList =item.label.split(',')
                            console.log(item.labelList,'item.labelList')
                            item.progress = (Number(item.groupBuyingProductOrderCount) / Number(item.groupBuyingProductCount)) * 100
                            item.groupBuyStatus = this.getGroupBuyStatus(item.startTime, item.stopTime);
							console.log(item.groupBuyStatus, 'item.groupBuyStatus')
                        });
                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },

    }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background: #ffffff;
    background-size: 100%;

}

.main-container {
    background: #ffffff;
    overflow: hidden;
    // box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
    height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
}


.topBox {
    margin-top: 10px;
    margin-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    width: calc(100% - 48px);
    // padding-left: 11px;
    // padding-right: 11px;

    // 全部分类  menu
    .sort-menu {
        display: flex;
        margin-bottom: 18px;
        justify-content: space-between;


        .sort_option {
            flex: auto;
            font-weight: bolder;
            line-height: 18px;
        }

        .sort_option_selected {
            font-weight: bolder;
            line-height: 18px;
            font-size: 18px;
            text-align: left;
            color: #111111;
        }
    }

    // 按钮公用样式
    .item_option {
        line-height: 28rpx;
        font-size: 28rpx;
        text-align: left;
        color: #666666;
    }



    // 综合  销量  价格按钮
    .goods_filter_tabs {
        display: flex;
        color: #333333;

        .filter_option {
            // font-weight: bold;
            border: 1px solid #e1e1e1;
            border-radius: 25px;
            margin-right: 10px;
            height: 24px;
            line-height: 24px;
            padding-left: 9px;
            padding-right: 9px;
            display: flex;
            align-items: center;

            font-size: 24rpx;
            text-align: left;
            color: #666666;

        }

        .filter_option_selected:last-child {
            margin-right: 0px;
        }

        .filter_option_selected {
            border: 1px solid #111111;
            font-size: 24rpx;
            text-align: left;
            color: #111111;
        }
    }
}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}

.scroll-box {
    padding-left: 24px;
    padding-right: 24px;
    height: 100vh;
    // background: white;
    // background: palevioletred;
}

.list_title {
    // font-size: 20px;
    font-size: 60rpx;
    margin-bottom: 35px;
}

.productList_content {
    // display: flex;
    width: 100%;
    // justify-content: space-between;
    // align-items: center;
    // flex-wrap: wrap;
    /* 允许Flex项目换行 */
}

.pinTuan_content {
    margin-top: 30rpx;
}

.bottom_left {
    width: calc(100% - 102rpx);
}

.goBuy_icon {
    margin-top: 2%;
    height: 38rpx;
    width: 70rpx;
    line-height: 38rpx;
    border-radius: 2px 2px 2px 2px;
    background: url("https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find/goBuy.png") no-repeat;
    background-size: 100%;
    // font-weight: 700;
    font-size: 16rpx;
    text-align: center;
    color: #FFFFFF;
    // position: absolute;
    // right: 0;
    // bottom: 15px;
}
// 拼团内的滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

.box_content {

    // margin-bottom: 12px;
    .content_img {
        margin-right: 20rpx;
        // width: 112rpx;
        // height: 112rpx;
        // line-height: 112rpx;
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
            // width: 112rpx;
            // height: 112rpx;
            width: 100%;
            height: auto;
        }
    }

    .content_text {
        width: calc(80% - 20rpx);
        display: flex;
        justify-content: center;
        flex-direction: column;

        .content_text_title {
            color: #333333;
            // font-weight: bolder;
            // font-family: 'PingFang SC';
            font-size: 28rpx;
            text-align: left;
            line-height: 36rpx;
            // margin-top: 2px;
            max-width: 100%;


        }

        .text_title {
            // 超过两行  文字用省略号
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: normal;

            // 超过一行  文字用省略号
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }
        .content_text_tips_box {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 5px; /* 给滚动条留空间 */
        }

        .content_text_tips {
            flex-shrink: 0;
            margin-right: 10rpx;
        }

        .tips_span {
            display: inline-block;
            padding: 0 10rpx;
            border-radius: 14rpx;
            background: #cecece;
            font-size: 20rpx;
            color: #FFFFFF;
            white-space: nowrap;
        }
        // .content_text_tips {
        //     // height: 14px;
        //     line-height: 28rpx;
        //     margin-top: 12rpx;
        //     color: #ffffff;
        // }


        // .tips_span {
        //     box-sizing: border-box;
        //     margin-right: 10rpx;
        //     padding: 0rpx 10rpx;
        //     border-radius: 14rpx;
        //     background: #cecece;
        //     // font-weight: 400;
        //     font-size: 20rpx;
        //     // line-height: 20rpx;
        //     text-align: center;
        //     color: #FFFFFF;

        // }

        // .tips_span:last-child {
        //     // margin-right: 0px;
        // }

        // 同城活动 部分的详情

        // 超过一行省略
        .sj_title {
            max-width: 100%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        .content_text_subtitle {
            // font-weight: 400;
            height: 20rpx;
            font-size: 20rpx;
            text-align: left;
            color: #111111;
            line-height: 20rpx;


            max-width: 100%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        // 同城活动下的地址
        .content_text_address {
            height: 20rpx;
            font-size: 20rpx;
            text-align: left;
            color: #999999;
            // letter-spacing: 2px;
            line-height: 20rpx;

            max-width: 100%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        .content_sj_address {
            height: 24rpx;
            line-height: 24rpx;
            font-size: 20rpx;
            text-align: left;
            display: flex;
            color: #888888;
        }

        .content_text_bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            // position: relative;
        }

        .content_text_progress {
            position: relative;
            margin-top: 12rpx;

            .progress_span {
                position: absolute;
                // font-weight: 400;
                font-size: 5px;
                line-height: 5px;
                text-align: left;
                color: #ffffff;
                top: 2px;
                left: 20rpx;
            }

            // 伪类   进度条里的图标
            ::v-deep .van-progress__portion::before {
                content: ' ';
                width: 8px;
                height: 8px;
                position: absolute;
                top: 1px;
                right: 0;
                left: 0;
                background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find/progress_logo.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                z-index: 99;
            }
            .hide-before::before{
				display: none!important;
			}
			::v-deep .hide-before .van-progress__portion::before{
				display: none!important;
			}
        }

    }
}

// 多次用到display
.act_display {
    display: flex;
}

.loading {
    text-align: center;
    /* height: 40px; */
    margin-top: 16px;
    color: #242629;
    // font-weight: 400;
    font-size: 14px;
}

::v-deep .van-nav-bar {
    // background-color: #f9f9f9 !important;
    z-index: 999 !important;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

// ::v-deep .van-icon::before {
//   content: "";
//   display: block;
//   width: 24px;
//   background-size: 24px;
//   height: 24px;
// }
::v-deep .van-nav-bar__title {
    font-size: 14px;
    color: #333333;
}

::v-deep .van-empty__image {
    width: 150px;
    height: 100px;

}



.pl15 {
    padding-left: 15px;
}

.pr15 {
    padding-right: 15px;
}
// margin 
.pl8{
	padding-left: 16rpx;
}
.pr8{
	padding-right:16rpx;
}
.l10{
	margin-left:20rpx;
}
.r2 {
	margin-right: 4rpx;
}
.r5 {
	margin-right: 10rpx;
}

.r10 {
	margin-right: 20rpx;
}

.t1 {
	margin-left: 2rpx;
}

.t2 {
	margin-top: 4rpx;
}

.t5 {
	margin-top: 10rpx;
}

.t7 {
	margin-top: 14rpx;
}

.t9 {
	margin-top: 18rpx;
}

.t10 {
	margin-top: 20rpx;
}
.t17{
	margin-top: 34rpx;
}
.t20 {
	margin-top: 72rpx;
}

.t324{
	margin-top: 648rpx;
}
.b1 {
	margin-right: 2rpx;
}

.b9 {
	margin-bottom: 18rpx;
}
.b10 {
	margin-bottom: 20rpx;
}
.b11 {
	margin-bottom: 22rpx;
}

.b12 {
	margin-bottom: 24rpx;
}

.b13 {
	margin-bottom: 26rpx;
}

</style>